<template>
  <transition>
    <div :class="`bwy-message ${msg.type}`" v-if="show">
      <span v-if="msg.type === 'success'">
        <w-icon name="success" size="20px" color="#01FF70"/>
      </span>
      <span v-if="msg.type === 'error'">
        <w-icon name="error" size="20px" color="#FF4136"/>
      </span>
      <span v-if="msg.type === 'info'">
        <w-icon name="info" size="20px" color="#AAAAAA"/>
      </span>
      <span v-if="msg.type ==='warning'">
        <w-icon name="warning" size="20px" color="#FF851B"/>
      </span>
      <div class="message-text">{{ msg.title }}</div>
    </div>
  </transition>
</template>

<script setup>
import {onMounted, reactive, ref,nextTick,toRefs} from 'vue'
import WIcon from '../../w-icon.vue'

const show = ref(false)
const top = reactive(30)

const prop = defineProps({
  msg: {
    type: Object,
    default() {
      return {}
    }
  }
})

const {msg} = toRefs(prop)

const init = () => {
  show.value = true
  nextTick(() => {
    const ele = document.querySelectorAll('.bwy-message')
    const eleNum = ele.length

    const dom = ele[eleNum - 1]
    const width = dom.clientWidth
    // 居中位置
    dom.style.left = `calc(50% - (${width / 2}px))`

    dom.style.transition= 'all .2s'
    if(eleNum === 1) {
      dom.style.top = 30 * eleNum + 'px'
    }else {
      dom.style.top = (30 * eleNum) + (40 * (eleNum - 1)) + 'px'
    }

    let timer = setInterval(() => {
      dom.style.top = -40 + 'px'
      show.value = false
      clearInterval(timer)
    }, msg.value.duration || 2000)
  })
}

onMounted(() => {
  init()
})
</script>

<style lang="scss" scoped>
.bwy-message{
  min-width: 240px;
  max-width: 90%;
  border-radius: 6px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 12px 10px;
  z-index: 999999;
  position: fixed;
  top: 0;
  span {
    margin-right: 4px;
  }
}
.message-text {
  font-size: 14px;
  letter-spacing: 1px;
}
.info {
  color: $bwy-color-info;
  background: $bwy-color-o-info;
  border: 1.5px solid $bwy-color-info;
}
.success {
  color: $bwy-color-success;
  background: $bwy-color-o-success;
  border: 1.5px solid $bwy-color-success;
}
.warning {
  color: $bwy-color-warning;
  background: $bwy-color-o-warning;
  border: 1.5px solid $bwy-color-warning;
}
.error {
  color: $bwy-color-danger;
  background: $bwy-color-o-danger;
  border: 1.5px solid $bwy-color-danger;
}
</style>
